<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="zh-CN"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="zh-CN"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="zh-CN"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="zh-CN">
<!--<![endif]-->
<head>

<!-- Basic Page Needs
  ================================================== -->
<meta charset="utf-8">
<title>{% block title %} {% endblock %} - 追求生活，追求梦想</title>
<meta name="description" content="享受生活 | 追求梦想 | 自由快乐 | xiaohello.cn ">
<meta name="author" content="xiaohello.cn">

<!-- Mobile Specific Metas
  ================================================== -->
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- CSS
  ================================================== -->
<link rel="stylesheet" href="/css/style.css">

<!-- JS
  ================================================== -->
<script type="text/javascript"
	src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.goup.js"></script>

<!--[if lt IE 8]>
       <div style=' clear: both; text-align:center; position: relative;'>
         <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
           <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
        </a>
      </div>
    <![endif]-->
<!--[if lt IE 9]>
		<script src="/js/html5.js"></script>
		<script src="/js/css3-mediaqueries.js"></script>
	<![endif]-->

<link href='/images/favicon.ico' rel='Shortcut icon' type='image/x-icon' />
</head>
<body>
	<div class="wrap-body zerogrid">
		<!--------------Header--------------->
		<header>
			<div class="wrap-header">
				<div class="top"></div>
				<div id="logo">
					<a href="/"><h1>Hello World</h1></a>
					<p>wxxiaohello.sinaapp.com | 追求的不仅是生活，更是梦想...</p>
				</div>
				<nav>
					<div class="wrap-nav">
						<div class="menu">
							<ul>
								<li><a href="/index.html" title="首页">首页</a></li>
								<li><a href="/blog.html" title="博客">博客</a></li>
								<li><a href="#Image-Gallery" title="图库">图库</a></li>
								<li><a href="#About-Us" title="关于">关于</a></li>
								{% if user.is_authenticated %}
								<li><a href="/edit" title="控制台">{{user.username}}</a></li>
								<li><a href="/logout" title="登出">登出</a></li>
								{% else %}
								<li><a href="/login.html" title="登陆">登陆</a></li>
								{% endif %}
							</ul>
						</div>
					</div>
				</nav>
			</div>
		</header>

		<!--------------Content--------------->
		<section id="content">
			<div class="wrap-content">
				<div class="row block">
					<div id="main-content" class="col-3-4">
						<!----  main content ----------->
						{% block content %} {% endblock %}

					</div>
					<!----  sidebar ----------->
					<div id="sidebar" class="col-1-4">
						<div class="wrap-col">
							<div class="box DDD-box">
								<form class="form-signin" role="form" method="get"
									action="/search/">
									<input class="search-keyword" type="text" placeholder="搜索..."
										name="keyword" />
								</form>
							</div>
							<div class="box">
								<div class="heading">
									<h2>分类</h2>
								</div>
								<div class="content" id="group_list">
									<ul>
										<!-- 分类 -->
										<img class="content-img" src="/images/onloading.gif" />
									</ul>
								</div>
							</div>
							<div class="box">
								<div class="heading">
									<h2>归档</h2>
								</div>
								<div class="content" id="filing_list">
									<ul>
										<!-- 归档 -->
										<img class="content-img" src="/images/onloading.gif" />
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!--------------Footer--------------->
		<footer>
			<div class="wrap-footer">
				<div class="row">
					<div class="col-1-3">
						<div class="wrap-col">
							<div class="box">
								<div class="heading">
									<a name="Image-Gallery"></a>
									<h2>照片墙</h2>
								</div>
								<div class="content gallery">
									<a href="#"><img src="/images/img1.jpg" width="120" /></a> <a
										href="#"><img src="/images/img2.jpg" width="120" /></a> <a
										href="#"><img src="/images/img3.jpg" width="120" /></a> <a
										href="#"><img src="/images/img4.jpg" width="120" /></a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-1-3">
						<div class="wrap-col">
							<div class="box">
								<div class="heading">
									<a name="About-Us"></a>
									<h2>关于</h2>
								</div>
								<div class="content gallery">
									<a href="/index" target="_blank"><img
										src="/images/about-us.png" style="border: 0px; float: left" /></a>
									<p>
										内容均为本人随意敲击键盘所出，用于检验本人电脑性能，本人亦看不懂是什么意思。亦不代表本人局部或全部同意、支持或者反对以上任何内容。
									</p>
								</div>
							</div>
						</div>
					</div>
					<div class="col-1-3">
						<div class="wrap-col">
							<div class="box">
								<div class="heading">
									<h2>联系我们</h2>
								</div>
								<div class="content">
									<p>从古至今，有句老话说的好：无事不登三宝殿~~！多交个朋友，多条路！没事不要来找我，有事就更不要来找我。</p>
									<p>
										网址 : <a href="http://wxxiaohello.sinaapp.com" target="_blank">xiaohello.cn</a>
									</p>
									<p>
										+86 (123) 444-5677 <br /> +86 (123) 444-5678
									</p>
									<p>地址: 地球村中国大陆飞龙区189号</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="copyright">
				<p>
					&copy; 2014 <a target="_blank"
						href="http://wxxiaohello.sinaapp.com/">XIAOHELLO.CN</a> 版权所有
					<!-- 页脚加入sae推广图标 -->
					<a href="http://sae.sina.com.cn/" target="_blank"> <img
						style="scrollbar-arrow-color: buttontext; vertical-align: middle;"
						src="http://sae.sina.com.cn/doc/_images/poweredby-117x12px.gif">
					</a>
				</p>
			</div>
		</footer>
	</div>
</body>

<!-- JS
  ================================================== -->

<script type="text/javascript">
	$(document).ready(function() {
		//返回顶部按钮
		$.goup({
			trigger : 100,
			bottomOffset : 50,
			locationOffset : 50,
			title : '返回顶部',
			titleAsText : false
		});
		//获取侧边栏信息
		$.get("/sidebar/",function (data) { 
			var data = (eval(data));
			group_list(data[0].group);
			filing_list(data[0].filing);
		});
	});
	
	//显示归档列表
	function filing_list(data){
		var html ="";
		for (var i=0 ;i<data.length;i++){
			var month = data[i].month.replace(/-/, "/")
			if(i>9){
				html += "<li class='filing_active'><a href='/filing/"+month+"/' title='"+data[i].month+"'> "+data[i].month+" ("+data[i].count+") "+"</a></li>";
			}else{
				html += "<li><a href='/filing/"+month+"/' title='"+data[i].month+"'> "+data[i].month+" ("+data[i].count+") "+"</a></li>";
			}
		}
		if(data.length>10){
			html+="<li><img style='border:0;float:none;cursor:pointer;'src='/images/down15.png' title='展开' onclick='_show_(this)'></li>";
		}
		$("#filing_list ul").html(html);
	}
	//显示分组列表
	function group_list(data){
		var html ="";
		for (var i=0 ;i<data.length;i++){
			var group = data[i];
			html += "<li><a href='/group/"+group.id+"/' title='"+group.content+"'> "+group.content+" ("+group.count+") "+"</a></li>";
		}
		$("#group_list ul").html(html);
	}
	
	//展开和收起按钮
	function _show_(obj){
			$(".filing_active").show("slow");	
			obj.setAttribute("src","/images/up15.png");
			obj.setAttribute("onclick","_hide_(this)");
			obj.setAttribute("title","收起");
	}
	
	function _hide_(obj){
		$(".filing_active").hide("slow");	
		obj.setAttribute("src","/images/down15.png");
		obj.setAttribute("onclick","_show_(this)");
		obj.setAttribute("title","展开");
}
</script>

</html>